import React,{createRef} from 'react'
import './stick.scss'
export default class Stick extends React.Component{
  
    placeHolder=createRef()
    placeMain=createRef()

    componentDidMount(){
        window.addEventListener('scroll',this.scrollHandle)
    }
    componentWillUnmount(){
        window.addEventListener('scroll',null)
    }
    scrollHandle=()=>{
        let {placeHolder,placeMain}=this
        let {top}=placeHolder.current.getBoundingClientRect()
        if(top<=0){
            placeHolder.current.style.height='40px'
            placeMain.current.classList.add('add-stick-div')
            
        }else{
            placeHolder.current.style.height='0'
            placeMain.current.classList.remove('add-stick-div')
            
        }
    }
    render(){
        let {placeHolder,placeMain}=this
        return <div style={{height:'40'}}>
            <div ref={placeHolder}></div>
            <div ref={placeMain}>{this.props.children}</div>
        </div>
    }

}